<template>
<div>
  <Modal v-model="markerMapModal" title="楼位置选取" fullscreen  @on-ok="markerMapModalConfirm">
    <div id="mapMarkerForBuilding"></div>
  </Modal>
</div>
</template>

<script>
import { autoCenter, checkLngLat } from '../../../../libs/util'

export default {
  name: 'mapMarkerForBuilding',
  data () {
    return {
      map: null,
      markerMapModal: false,
      choiceInfo: {},
      building_img: 'http://imgdl.tripln.top/webhdfs/v1/grid/label/label1656581442195_3347685345.png?op=OPEN&namenoderpcaddress=hadoop01:9000&offset=0',
      Polygon: null,
      marker: null,
      returnObject: {}
    }
  },
  methods: {
    init (e) {
      this.choiceInfo = e
      let x = autoCenter(this.choiceInfo.csc_mapjson)
      this.markerMapModal = true
      let _this = this
      setTimeout(function () {
        _this.initMap(x)
      }, 1000)
    },
    initMap (e) {
      this.map = new AMap.Map('mapMarkerForBuilding', {
        resizeEnable: true,
        center: new AMap.LngLat(e.lng, e.lat),
        zoom: 15
      })
      this.createMaker(e)
      this.createPolygon()
    },
    updateInitMap (e1, e2) {
      this.choiceInfo = e2
      let lnglat = {}
      try {
        let x = e1.csc_mapjson.split(',')
        let y = checkLngLat(x[0], x[1])
        if (!y) {
          this.$Notice.error({ title: '坐标检验异常！', desc: '坐标数据异常，将使用默认坐标展示！' })
          let z = autoCenter(this.choiceInfo.csc_mapjson)
          lnglat.lng = z.lng
          lnglat.lat = z.lat
        } else {
          lnglat.lng = x[0]
          lnglat.lat = x[1]
        }
      } catch (e) {
        console.log(e)
      }
      this.markerMapModal = true
      let _this = this
      setTimeout(function () {
        _this.initMap(lnglat)
      }, 1000)
    },
    clickMap (ev) {
      var lnglat = ev.lnglat
      this.map.remove(this.marker)
      this.createMaker(lnglat)
    },
    createPolygon () {
      var path = []
      let data = JSON.parse(this.choiceInfo.csc_mapjson)
      data.forEach(item => {
        path.push(new AMap.LngLat(item[0], item[1]))
      })
      var Polygon = new AMap.Polygon({
        path: path,
        strokeColor: '#3CB371',
        strokeWeight: 2,
        strokeStyle: 'solid',
        strokeOpacity: 1,
        fillOpacity: 0.1,
        fillColor: '#3CB371',
        zIndex: 50
      })
      Polygon.on('mouseover', function (e) {
        Polygon.setOptions({
          fillColor: '#FFB800'
        })
      })
      Polygon.on('mouseout', function (e) {
        Polygon.setOptions({
          fillColor: '#3CB371'
        })
      })
      this.Polygon = Polygon
      this.Polygon.on('click', this.clickMap)
      this.map.setFitView([ this.Polygon ])
      this.map.setZoom(this.map.getZoom())
      this.map.add(this.Polygon)
    },
    createMaker (e) {
      var icon = new AMap.Icon({
        size: new AMap.Size(20, 20), // 图标尺寸
        image: this.building_img, // Icon的图像
        imageSize: new AMap.Size(20, 20) // 根据所设置的大小拉伸或压缩图片
      })
      this.marker = new AMap.Marker({
        position: new AMap.LngLat(e.lng, e.lat),
        offset: new AMap.Pixel(-20, -20),
        icon: icon
      })
      this.map.add(this.marker)
    },
    markerMapModalConfirm () {
      let result = AMap.GeometryUtil.isPointInPolygon(this.marker.getPosition(), this.Polygon.getPath())
      if (!result) {
        this.$Notice.error({ title: '绘制失败！', desc: '楼坐标点位不在网格范围内！' })
      }
      this.returnObject.csc_mapjson = this.marker.getPosition()
      this.returnObject.markerResult = result
      this.$emit('returnMapInfoForBuilding', this.returnObject)
    }
  },
  beforeDestroy () {
    this.map && this.map.destroy()
  },
  watch: {
    markerMapModal (val) {
      if (!val) {
        this.map && this.map.destroy()
      }
    }
  }
}
</script>

<style scoped>
#mapMarkerForBuilding {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
}
</style>
